<template>
  <div style="height: 100%;">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="24">
            <div class="top">
              <el-row type="flex" justify="center" :gutter="50">
                <el-col :span="4"><div class="top-logo"><img src="../assets/img/logo.png"/></div></el-col>
                <el-col :span="12">
                  <div>
                    <el-menu :default-active="activeIndex" text-color="#ffffff" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                      <el-menu-item index="1" style="background-color: #138bee;">首页</el-menu-item>
                      <el-menu-item index="2" style="background-color: #138bee;" @click="home">班级</el-menu-item>
                      <el-menu-item index="3" style="background-color: #138bee;" @click="exam">考试</el-menu-item>
                      <el-menu-item index="4" style="background-color: #138bee;">课程</el-menu-item>
                      <el-menu-item index="5" style="background-color: #138bee;">题库</el-menu-item>
                      <el-menu-item index="6" style="background-color: #138bee;">上课</el-menu-item>
                      <el-menu-item index="7" style="background-color: #138bee;">计划进度模板</el-menu-item>
                      <el-menu-item index="8" style="background-color: #138bee;">计划进度管理</el-menu-item>
                    </el-menu>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="top-head-left">
                    <img src="../assets/img/toxiang.png" />
                  </div>
                  <div class="top-head-right">
                    <el-dropdown size="mini">
                      <span class="el-dropdown-link">{{name}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="cancellation">退出登录</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside>
          <div class="content">
            <el-row type="flex" justify="center" :gutter="30">
              <el-col :span="20">
                <div class="content-one">
                  <el-row type="flex" justify="center">
                    <div class="content-one-logo">
                      <img src="../assets/img/toxiang.png" />
                    </div>
                  </el-row>
                  <el-row type="flex" justify="center">
                    <div class="content-one-name">
                      {{name}}
                    </div>
                  </el-row>
                  <el-row type="flex" justify="center">
                    <div class="content-one-personal">
                      暂未设置个人标签
                    </div>
                  </el-row>
                  <el-row type="flex" justify="center">
                    <div class="content-one-button">
                      <el-button size="mini" type="primary">去上课</el-button>
                    </div>
                  </el-row>
                  <div class="content-one-modify">
                  <el-row type="flex" justify="center">
                    <el-col :span="12">
                      <div class="content-one-modify-left">
                        <i class="el-icon-unlock"></i>
                          <el-button type="text" @click="dialogFormVisible = true"><span>修改密码</span></el-button>
                          <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
                            <el-form :model="pas" ref="pawForm" :rules="rules">
                              <el-form-item label="新密码" prop="password">
                                <el-input v-model="pas.password" clearable prefix-icon="el-icon-lock" show-password placeholder="请输入新密码"></el-input>
                              </el-form-item>
                              <el-form-item label="确认新密码" prop="password1">
                                <el-input v-model="pas.password1" clearable prefix-icon="el-icon-lock" show-password placeholder="请输入再次输入新密码"></el-input>
                              </el-form-item>
                              <el-form-item label="验证码" prop="code">
                                <el-input v-model="pas.code" clearable prefix-icon="el-icon-more-outline" placeholder="请输入验证码"></el-input>
                                <el-button size="mini" round>发送验证码</el-button>
                              </el-form-item>
                              <el-form-item>
                                <el-button type="primary" round @click="keep('pawForm')">保存</el-button>
                              </el-form-item>
                            </el-form>
                          </el-dialog>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="content-one-modify-right">
                        <i class="el-icon-message-solid"></i>
                        <span>我的消息</span>
                      </div>
                    </el-col>
                  </el-row>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-col :span="20">
                <div class="content-botton">
                <el-menu default-active="1" class="el-menu-vertical-demo" @close="handleClose">
                    <el-menu-item index="1" @click="index">
                      <i class="el-icon-s-home"></i>
                      <span slot="title">个人中心</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="addExam">
                      <i class="el-icon-date"></i>
                      <span slot="title">添加考试</span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="addCourse">
                      <i class="el-icon-collection"></i>
                      <span slot="title">添加课程</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="addPlan">
                      <i class="el-icon-folder-add"></i>
                      <span slot="title">添加模板</span>
                    </el-menu-item>
                    <el-menu-item index="5" @click="addSchedule">
                      <i class="el-icon-tickets"></i>
                      <span slot="title">添加计划</span>
                    </el-menu-item>
                    <el-menu-item index="6">
                      <i class="el-icon-data-line"></i>
                      <el-button type="text" @click="dialogVisible = true"><span>学习报告</span></el-button>
                      <el-dialog title="请查看选择报告" :visible.sync="dialogVisible" width="60%" :before-close="close">
                        <el-row>
                          <el-col :span="22">
                            <div style="border-radius: 1.25rem; border: 1px solid #f0f1f2; padding: 15px;">
                              <el-row type="flex" justify="center">
                                <el-col :span="5">
                                  <img src="../assets/img/baogao1.png" />
                                </el-col>
                                <el-col :span="19">
                                  <p style="font-size: 30px;">体验课报告</p>
                                </el-col>
                              </el-row>
                            </div>
                          </el-col>
                        </el-row>
                        <div style="margin: 10px 0;"></div>
                        <el-row>
                          <el-col :span="22">
                            <div style="border-radius: 1.25rem; border: 1px solid #f0f1f2; padding: 15px;">
                              <el-row type="flex" justify="center">
                                <el-col :span="5">
                                  <img src="../assets/img/baogao2.jpg" />
                                </el-col>
                                <el-col :span="19">
                                  <p style="font-size: 30px;">课后学习报告报告</p>
                                </el-col>
                              </el-row>
                            </div>
                          </el-col>
                        </el-row>
                      </el-dialog>
                    </el-menu-item>
                </el-menu>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-aside>
        <el-main>
          <!-- 子路由 -->
          <router-view>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import http from '@/utils/HttpUtil'
export default {
  data () {
    // eslint-disable-next-line camelcase
    const validate_password = (rule, value, callback) => {
      if (this.pas.password1) {
        if (!value) {
          callback(new Error('请确认您的密码'))
        } else if (!(value === this.pas.password1)) {
          callback(new Error('俩次输入的密码不一致'))
        } else {
          callback()
        }
      } else {
        if (!value) {
          callback(new Error('密码不能为空'))
        } else {
          callback()
        }
      }
    }
    const validateComfirmpwd = (rule, value, callback) => {
      if (this.pas.password) {
        if (!value) {
          callback(new Error('请确认您的密码'))
        } else if (!(value === this.pas.password)) {
          callback(new Error('俩次输入的密码不一致'))
        } else {
          callback()
        }
      } else {
        if (!value) {
          callback(new Error('密码不能为空'))
        } else {
          callback()
        }
      }
    }
    return {
      activeIndex: '1',
      name: '',
      dialogFormVisible: false,
      dialogVisible: false,
      pas: {
        password: '',
        password1: '',
        code: ''
      },
      active: {
        updateSelfPassword: 'LearningPlatform/manager/user/updateSelfPassword'
      },
      rules: {
        password: [{
          required: true, trigger: 'blur', validator: validate_password
        }],
        password1: [{
          required: true, trigger: 'blur', validator: validateComfirmpwd
        }],
        code: [{
          required: true, message: '请输入验证码', tigger: 'blur'
        }]
      }
    }
  },
  components: {

  },
  created () {
    this.name = localStorage.getItem('name')
  },
  methods: {
    handleSelect (key, keyPath) {
    },
    cancellation () {
      localStorage.clear()
      this.$router.push('/')
    },
    handleClose (key, keyPath) {
    },
    addExam () {
      this.$router.push('/addExam')
    },
    index () {
      this.$router.push('/index')
    },
    addCourse () {
      this.$router.push('/addCourse')
    },
    addPlan () {
      this.$router.push('/addPlan')
    },
    addSchedule () {
      this.$router.push('/addSchedule')
    },
    home () {
      this.$router.push('/home')
    },
    exam () {
      this.$router.push('/exam')
    },
    close (done) {
      done()
    },
    keep (refName) {
      this.$refs[refName].validate((valid) => {
        if (valid) {
          const pas = this.pas
          const param = (({password, code}) => ({
            password, code
          }))(pas)
          // 发送请求，实现修改
          http.xhrPost(this, this.active.updateSelfPassword, param, (res) => {
            // 给出修改提示
            this.$message({
              type: 'success',
              message: res.message
            })
            // 表单重置
            this.$refs[refName].resetFields()
          })
        } else {
          // 校验不通过
          return false
        }
      })
    }
  }
}
</script>

<style scoped="scoped">
 @import url("../assets/css/homepage.css");
</style>
